<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>五彩导航</title>
	<style type="text/css">
		a.one{
             display: inline-block;
             height: 58px;
             width: 120px;
             background:url("images/bg1.png");
  			text-decoration: none;
			color:white;
			line-height: 50px;
            text-align: center;
		}

       a.one:hover{
           background: url("images/bg2.png");

       }a.two{
             display: inline-block;
             height: 58px;
             width: 120px;
             background:url("images/bg2.png");
  			text-decoration: none;
			color:white;
			line-height: 50px;
            text-align: center;
		}

       a.two:hover{
           background: url("images/bg3.png");

       }a.three{
             display: inline-block;
             height: 58px;
             width: 120px;
             background:url("images/bg3.png");
  			text-decoration: none;
			color:white;
			line-height: 50px;
            text-align: center;
		}

       a.three:hover{
           background: url("images/bg4.png");

       }a.four{
             display: inline-block;
             height: 58px;
             width: 120px;
             background:url("images/bg5.png");
  			text-decoration: none;
			color:white;
			line-height: 50px;
            text-align: center;
		}

       a.four:hover{
           background: url("images/bg6.png");

       }a.five{
             display: inline-block;
             height: 58px;
             width: 120px;
             background:url("images/bg6.png");
  			text-decoration: none;
			color:white;
			line-height: 50px;
            text-align: center;
		}

       a.five:hover{
           background: url("images/bg7.png");

       }
       .six{
       	text-align: center;
       }

	</style>
</head>
<body class="six">
    <a href="#" class="one">首页</a>
	<a href="#" class="two">精品</a>
	<a href="#" class="three">包邮</a>
	<a href="#" class="four">试用</a>
	<a href="#" class="five">海淘</a>	
</body>
</html>